<template>
  <div>
    成语小游戏 我的得分：{{ myinfo.score }},游玩{{ myinfo.times }}次， 得分排{{
      myinfo.idiomRank?.score
    }}名， 游玩次数排{{ myinfo.idiomRank?.times }}名
  </div>
  <div>
    <!-- {{ idiom }} -->
    <hr />
    <div v-if="idiom.idiom">
      <div>第{{ idiom.level }}关</div>
      <!-- {{ idiom.idiom }} -->

      <!-- 从索引的位置分隔成两个字符 -->
      {{ idiom.idiom.substring(0, idiom.index) }}
      _
      {{ idiom.idiom.substring(idiom.index) }}
      <hr />
      <!-- {{ idiom.results.split('') }} -->

      <div>
        <el-button
          type="primary"
          v-for="d in idiom.results.split('')"
          @click="idiom_answer(d)"
        >
          {{ d }}
        </el-button>
      </div>

      <hr />

      {{ answer_info }}

      <hr />
    </div>

    <el-button type="primary" @click="getIdiom">获取成语</el-button>
  </div>

  <div>
    <div v-for="d in tlist">
      {{ d.user.tbUser.username }}的记录： 游玩{{ d.times }}次，最高{{
        d.score
      }}分
    </div>

    <hr />

    <div v-for="d in slist">
      {{ d.user.tbUser.username }}的记录： 最高{{ d.score }}分，游玩{{
        d.times
      }}次
    </div>
  </div>

  <BackComp />
</template>
<script setup>
import { ref } from 'vue';
import { Api } from '../../script/Api';

import { ElMessage } from 'element-plus';
import BackComp from '../../components/BackComp.vue';

const idiom = ref({});

const answer_info = ref({});

const getIdiom = () => {
  answer_info.value = {};
  Api.get('/games/idiom', {}, (data) => {
    if (data.success) {
      idiom.value = data.data;
    } else {
      ElMessage.error(data.message);
    }
  });
};

const idiom_answer = (answer) => {
  Api.post('/games/idiom', { answer: answer }, (data) => {
    answer_info.value = data.data;

    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

const slist = ref([]);
const tlist = ref([]);

const myinfo = ref({});

const query = () => {
  Api.get('/games/idiom/1/10/1', {}, (data) => {
    tlist.value = data.data.data;
  });

  Api.get('/games/idiom/1/10/2', {}, (data) => {
    slist.value = data.data.data;
  });

  Api.get('/games/idiom/my', {}, (data) => {
    myinfo.value = data.data;
  });
};

query();
</script>
<style scoped></style>
